/*
 * Created: 2022-08-27 13:56:15
 * Author : 涛涛涛
 */

import React, { FC, useContext } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { ProductExhibitionContext } from '@/pages/ProductExhibition/ProductExhibitionContext';

export interface IProps extends ICompProps {}
PriceAmount.defaultProps = {} as Partial<IProps>;
function PriceAmount(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('PriceAmount', className);
    const { product } = useContext(ProductExhibitionContext);
    const CompInfo = ({ title, children }: { title: string; children: React.ReactNode }) => {
        return (
            <View className="Info">
                <View className="Info-top">{title}</View>
                <View className="Info-bottom">{children}</View>
            </View>
        );
    };
    return (
        <RootView className={localClassName} style={style}>
            <CompInfo title="发行价格">
                <View className="bottom-inner">
                    <View className="zuanshi">
                        <Image className="img" src={require('@/assets/images/zuan_shi.png')}></Image>
                    </View>
                    <View className="price">{product.price}</View>
                </View>
            </CompInfo>
            <CompInfo title="限量发行">{product.leftQuantity}</CompInfo>
        </RootView>
    );
}
export default React.memo(PriceAmount as FC<IProps>);
const RootView = styled(View)`
    &.PriceAmount {
        margin: auto;
        margin-top: 40px;
        width: 640px;
        display: flex;
        .Info {
            flex: 1;
            line-height: 1;
            .Info-top {
                color: #373737;
                font-size: 24px;
                font-weight: 600;
            }
            .Info-bottom {
                margin-top: 30px;
                font-size: 68px;
                font-weight: 600;
            }
        }
        .bottom-inner {
            display: flex;
            align-items: center;
            .zuanshi {
                width: 28px;
                height: 46px;
                .img {
                    display: block;
                    width: inherit;
                    height: inherit;
                }
            }
            .price {
                margin-left: 20px;
            }
        }
    }
`;
